<template>
  <div id="chartContainer2" style="width: 100%; height: 100%"></div>
</template>
<script setup lang="ts">
//挂载时候，构建bi展现器实例
import {onMounted} from 'vue';

import config_chart_2 from "@/views/chart/Chart_2/Chart_2_config.js"
import jdxsOnUpdateData_chart2 from "@/views/chart/Chart_2/spjdxsResultsResponse_data.js";
import {dataConfig_chart2} from "@/views/chart/Chart_2/Chart_2_dataConfig"
import  qyxsOnUpdateData_chart2 from "@/views/chart/Chart_2/spqyxsResultsResponse_data.js";
import onUpdateDatasetlist_rtn_chart2 from "@/views/chart/Chart_2/onupdatedatasetlist.js";
let onupdatedatamaps = new Map();
onupdatedatamaps.set(qyxsOnUpdateData_chart2.name, qyxsOnUpdateData_chart2);
onupdatedatamaps.set(jdxsOnUpdateData_chart2.name, jdxsOnUpdateData_chart2);
let onupdatedatamaps_rtn = new Map();
let data = [
  qyxsOnUpdateData_chart2,jdxsOnUpdateData_chart2
]

//预先提供：以外部数据源的方式，动态请求来提供‘候选数据集列表’
function onUpdateDatasetList() {
  console.log("chart_2.vue onUpdateDatasetList  is called")
  return new Promise((resolve, reject) => {
    resolve(onUpdateDatasetlist_rtn_chart2)
  })
}

//option.onUpdateDatasetList = onUpdateDatasetList
function onUpdateData(datasets, params) {
  console.log("chart_2.vue....datasets.length:", datasets.length, datasets);
  datasets.forEach((dataset) => {
    if (onupdatedatamaps.get(dataset.name)) {
      onupdatedatamaps_rtn.set(dataset.name, onupdatedatamaps.get(dataset.name));
      console.log(".chart_2.vue.......数据集名称:", dataset.name, " type:", dataset.type, ',拿到的记录::', onupdatedatamaps_rtn);
    }
  })
  return new Promise((resolve, reject) => {
    // resolve的数据格式
    resolve(data)
/*
    resolve([
      {
        "name": "商品销售",
        "id": "商品销售id",
        "type": 4,
        "response_data": [
          {
            "商品名称": "笔记本电脑",
            "区域名称": "北京",
            "销售额": 1500
          },
          {
            "商品名称": "笔记本电脑",
            "区域名称": "上海",
            "销售额": 1600
          },
          {
            "商品名称": "台式电脑",
            "区域名称": "北京",
            "销售额": 900
          },
          {
            "商品名称": "台式电脑",
            "区域名称": "上海",
            "销售额": 1200
          }
        ]
      }
    ]);
*/
  })

}


//导入BI报表对应的完整的数据集

let reportInstance = null;
let option = {reportConfig: config_chart_2, reportData: [], paramsConfig: []};
option.onUpdateData = onUpdateData;
onMounted(() => {
  try {
    reportInstance = new XZDashboard("#chartContainer2", option);
    console.log("1.......Chart_2.vue......onMounted");

    reportInstance.updateData(dataConfig_chart2);//这里传入的就是  chartDesigner模板需要的数据集，不一定需要记录
  } catch (error) {
    console.log("3.........Chart_2.vue....onMounted", error);
  }




});
</script>


<style scoped>

</style>
